<!DOCTYPE HTML >
<html lang="en">

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
	<meta name="keywords" content="" />
	<meta name="description" content="" />
	<meta content="width=device-width, minimum-scale=1,initial-scale=1, maximum-scale=1, user-scalable=1" id="viewport" name="viewport" />
	<meta content="yes" name="apple-mobile-web-app-capable" />
	<meta content="black" name="apple-mobile-web-app-status-bar-style" />
	<meta content="telephone=no" name="format-detection" />
	<link type="text/css" rel="stylesheet" href="../../template/css/com/com.css" />
	<link type="text/css" rel="stylesheet" href="../../template/css/list/style.css" />
	<link rel="stylesheet" href="../../resource/weuimin.css" />
	<link rel="stylesheet" href="../../resource/jinsuistyle.css" />
	<script src="../../template/js/jquery.js"></script>
	<script type="text/javascript" src="../../script/constants.js"></script>
	<script type="text/javascript" charset="UTF-8" src="../../script/naes.js"></script>
	<script type="text/javascript" charset="UTF-8" src="../../script/tmd5.js"></script>
	<script src="../../script/api.js"></script>
	<title>选择房间界面</title>
	<style>
		* {
			padding: 0px;
			margin: 0px;
		}

		.rmstyle {
			width: 50px;
			height: 50px;
			font-size: 12px;
			background: #509DD8;
			color: #ffffff;
			border-radius: 3px;
			text-align: center;
			border: 1px solid #2878b5;
			position: absolute;
		}
	</style>
</head>

<body>
	<header id="statusBar">
		<div style="height:75px;background: #298cb4;display: table;width: 100%;">
			<div style="height:50px;margin-top: 25px;line-height: 50px;color: #ffffff;background: #1e6887;">
				<div style="width: 26%;margin-left: 3%;font-size: 16px;float: left;" onclick="api.closeWin();">
					返回
				</div>
				<div id="jstitle" style="text-align: center;font-weight:bold;width: 50%;font-size: 16px;float: left;">

				</div>
			</div>
		</div>
	</header>

	<div style="height:40px;text-align: center;line-height:40px;font-weight:bold;width:100%;font-size: 16px;float: left;">
		房间选择
	</div>

	<div style="background: #ffffff;width:100%;height:150px;">
		<div id="room_img" style="width:40%;height:110px;float:left;"></div>
		<div style="float:left;width:60%;height:108px;border-top:1px solid #C3C3C3;border-bottom:1px solid #C3C3C3;">
			<span id="room_name" style="color:#C88E37;font-size:14px;margin-left:5px;"></span><br/>
			<span id="room_price" style="color:#C88E37;font-size:14px;margin-left:5px;"></span>
			<div>
				<input id="rzsj" type="date" readonly="true" style="float: left;border: none;height:30px;background: #ffffff;font-size: 14px;width:105px;appearance:none;text-align: center;" min="" />
				<div style="float: left;margin-top:9px;"><span style="font-size:12px;">入住</span></div>
			</div>
			<div>
				<input id="tfsj" type="date" readonly="true" style="float: left;border: none;height:30px;background: #ffffff;font-size: 14px;appearance:none;width:105px;text-align: center;" min="" />
				<div style="float: left;margin-top: 9px;"><span style="font-size:12px;">离店</span></div>
			</div>
			<div id="rest_day" style="float: right;height:40px;margin-top: 10px;margin-right: 15px;width:20%;text-align: center;color: #8B8970;">
				共1晚
			</div>
		</div>
	</div>

	<div id="roomType" style="width:360px;height:50px;overflow-x:auto;">

	</div>

	<div id="floors" style="width:100%;height:40px;background-color:#fff;border-bottom:1px solid #C3C3C3;">
		<img src="../../image/floor.png" style="float: left;width:32.25px;height:30px;margin-top:5px;margin-left:5px;" />
		<div id="floor_name" style="float: left;">

		</div>
	</div>


	<div style="height:240px;">

		<div id="roomBox" style="width:90%;height:160px;overflow: scroll;position:relative;margin:5%">
		</div>
		<!-- <div style="margin-left:220px;margin-top:20px;">2楼</div>

					<div style="float:left;width:35px;height:35px;background-color:#2F70D0;margin-left:5px;margin-top:10px;border-radius:5px;""></div>
					<div style="float:left;width:35px;height:35px;background-color:#2F70D0;margin-left:5px;margin-top:10px;border-radius:5px;""></div> -->
		<div style="width:100%;height:30px;line-height:30px;margin-top:0px;">
			<div>
				<div style="float:left;width:20px;height:20px;background-color:gray;margin-left:10px;margin-top:24px;"></div>
				<div style="float:left;margin-left:5px;margin-top:24px;">不可选择</div>
			</div>
			<div>
				<div style="float:left;width:20px;height:20px;background-color:#509DD8;margin-left:10px;margin-top:24px;"></div>
				<div style="float:left;margin-left:5px;margin-top:24px;">未预定</div>
			</div>
			<div>
				<div style="float:left;width:20px;height:20px;background-color:#C93A29;margin-left:10px;margin-top:24px;"></div>
				<div style="float:left;margin-left:5px;margin-top:24px;">已预订</div>
			</div>
			<div>
				<div style="float:left;width:20px;height:20px;background-color:#F1A21D;margin-left:10px;margin-top:24px;"></div>
				<div style="float:left;margin-left:5px;margin-top:24px;">当前选中</div>
			</div>
		</div>

	</div>

	<div>
		<div id="yxfjList" class="yxfjList" style="float:left;width:70%;height:64px;font-size:20px;line-height:64px;text-align:left;background-color:#fff;">已选房间&nbsp;&nbsp;</div>
		<div style="float:right;width:30%;height:64px;font-size:20px;color:#fff;background-color:#298cb4;line-height:64px;text-align:center;" onclick="bookHotel();">提交</div>
	</div>

	<script>
		var data;
		var str;
		var stDate = "";
		var edDate = "";
		var pic = new Array();
		var hotelId ;
		var buildings;
		var index;
		var buidlingId;

		function openThis(roomTypeId, roomId, hroomId, roomNum) {
			var width = document.documentElement.clientWidth;
			var height = document.documentElement.clientHeight;
			var jstitle = $('#jstitle').text();
			//alert(jstitle);
			if (hroomId == null) {
				api.openFrame({
					name: 'order',
					url: './order.html',
					rect: {
						x: 0,
						y: 200,
						w: width,
						h: height - 200
					},
					pageParam: {
						roomNum: roomNum,
						roomTypeId: roomTypeId,
						roomId: roomId,
						jstitle: jstitle,
						hroomId: hroomId
					}


				});
				return false;
			}

			if (hroomId == 2) {
				var msg = "对不起，" + roomNum + "号房间已被预订！";
				// alert(msg);
				return false;
			}

			var arrText = new Array();
			var arrCl = document.getElementsByClassName('yxfj');
			var nowArrCl = document.getElementsByClassName('yxfj');
			for (var i = 0; i < arrCl.length; i++) {
				var text = $api.text(arrCl[i]);
				arrText.push(text);
			}
			for (var i = 0; i < arrText.length; i++) {
				if (roomNum == arrText[i]) {
					//alert("错误");
					var id = document.getElementById("yx" + roomId + "");
					var fjid = document.getElementById(roomId);
					$api.remove(id);
					removeByValue(roomIdArr, roomId);
					var fjId = document.getElementById(roomId);
					fjId.style.background = '#509DD8';
					$api.removeCls(fjid, 'cur-room-style');
					$api.addCls(fjid, 'roomStyle1');
					nowArrCl = document.getElementsByClassName('yxfj');
					var tdmsg = $("#yxfjList").text();
					if (tdmsg + "" == "") {
						$("#yxfjList").text("您尚未选择房间")
					}
					return false;
				}
				setHeaderInfo();
			}
			api.openFrame({
				name: 'order',
				url: './order.html',
				rect: {
					x: 0,
					y: 150,
					w: width,
					h: height - 150
				},
				pageParam: {
					roomNum: roomNum,
					roomTypeId: roomTypeId,
					roomId: roomId,
					jstitle: jstitle,
					hroomId: hroomId,
				}

			});
		}

		function removeByValue(arr, val) {
				for (var i = 0; i < arr.length; i++) {
						if (arr[i][0] == val) {
								arr.splice(i, 1);
								break;
						}
				}
		}

		function setHeaderInfo(title, roomId, roomNum, roomTypeId, price) {
				//alert(roomId);
				roomIdcopy = roomId;
				roomNumcopy = roomNum;
				roomTypeIdcopy = roomTypeId;
				if (title == "fav") {
						var tdmsg = $("#yxfjList").text();
						if (tdmsg == "您尚未选择房间") {
								$("#yxfjList").text("")
						}
						var yxfjList = document.getElementById('yxfjList');
						$api.append(yxfjList, '<span class="yxfj" id="yx' + roomId + '" onclick=openThis("' + roomTypeId + '","' + roomId + '",null,"' + roomNum + '")>' + roomNum + '</span>');
						var arr = new Array();
						arr.push(roomId, roomTypeId, roomNum, price);
						roomIdArr.push(arr);
						var fjId = document.getElementById(roomId);
						fjId.style.background = '#F1A21D';
				}


		}


		window.apiready = function() {
      hotelId = api.pageParam.id;
			stDate = api.pageParam.startTime;
			edDate = api.pageParam.endTime;
			buildings = api.pageParam.buildings;
			index = api.pageParam.index;

      buidlingId=buildings[index].JZID;
					// alert(JSON.stringify(buidlingId));
							console.log(JSON.stringify(buidlingId));
			var callback = function(ret, err) {
				//console.log(JSON.stringify(ret));

				var callback = function(ret, err) {
					console.log(JSON.stringify(ret));
					str = ret.list;
				 console.log(JSON.stringify(str));

					if (str) {
						$('#room_name').html(str[0].NAME);
						$('#room_price').html("¥" + str[0].PRICE);
						for (i in str) {
							var add = '';
							for (k in str[i].picUrl) {
								pic.push(str[i].picUrl[k].URL);

							}

							//pic = new Array();
							$api.append(roomType, '<div id="' + str[i].ID + '" style="float:left;width:60px;height:40px;line-height:20px;text-align:center;background-color:#fff;margin-top:5px;margin-left:5px;font-size:12px;" onclick=change_room("' +str[i].ID+'","'+str[i].NAME +
								'","' + str[i].PRICE + '")>' + str[i].NAME + "¥" + str[i].PRICE + '</div>');
						}
						var offset = $api.offset($api.dom('#room_img'));
						var height = $("#room_img").height();
						var width = $("#room_img").width();
						var UIScrollPromptView = api.require('UIScrollPromptView');
						UIScrollPromptView.open({
							rect: {
								x: offset.l,
								y: offset.t,
								w: width,
								h: height
							},
							data: {
								paths: pic,
								captions: [],
								prompts: pic
							},
							styles: {
								caption: {
									height: 35,
									color: '#E0FFFF',
									size: 13,
									bgColor: '#696969',
									position: 'bottom'
								},
								indicator: {
									align: 'center',
									color: '#FFFFFF',
									activeColor: '#298cb4'
								},
								prompt: {
									button: {
										normal: '',
										highlight: '',
										x: 0,
										y: 100,
										w: 60,
										h: 40
									},
									x: 0,
									y: 50,
									w: 160,
									h: 90,
									contentMode: 'scaleToFill',
									animation: true
								}
							},
							placeholderImg: '',
							contentMode: 'scaleToFill',
							interval: 3,
							fixedOn: '',
							loop: true,
							fixed: false
						});
							$("#" + str[0].ID).css('color', '#C88E37');
					}


				}
				var parameter = {
					"hotelId": hotelId
				};
				signAjax(JSON.stringify(parameter), url.fjtype, callback);



				if (ret) {
					data = ret.list;
					if(data.length>0){
						console.log(JSON.stringify(data));
						openRooms(data[0].NUM, data[0].FLOORID);
						for (m in data) {
							$api.append(floor_name, '<a id="' + data[m].NUM + '" style="margin-left:20px;font-size:16px;line-height:40px;" onclick=openRooms("' + data[m].NUM + '","' + data[m].FLOORID + '")>' + data[m].NUM + '楼</a>');
							var floorid = data[m].FLOORID;
							var callback = function(ret, err) {
								console.log(JSON.stringify(ret));
								//alert(JSON.stringify(ret));

								var offset = $api.offset($api.dom('#roomBox'));
								var height = $("#roomBox").height();
								var width = $("#roomBox").width();

								var UIListView = api.require('UIListView');
								UIListView.open({
									rect: {
										x: offset.l,
										y: offset.t,
										w: width,
										h: height
									},
									styles: {
										borderColor: '#696969',
										item: {
											bgColor: '#ffffff',
											activeBgColor: '#F5F5F5',
											height: 55.0,
											imgWidth: 40,
											imgHeight: 40,
											imgCorner: 4,
											placeholderImg: '',
											titleSize: 15.0,
											titleColor: '#000',
											subTitleSize: 12.0,
											subTitleColor: '#000',
											remarkColor: '#000',
											remarkSize: 16,
											remarkIconWidth: 30
										}
									},
									fixedOn: '',
									showScrollBar: false,
									fixed: false
								}, function(ret, err) {
									if (ret) {
										if (ret.eventType == "clickContent" || ret.eventType == "clickRemark") {
											UIListView.getDataByIndex({
												index: ret.index
											}, function(data, err) {
												if (data) {
													openRooms(data[m].NUM, floorid);
												} else {
													console.log(JSON.stringify(err));
												}
											});
										}
									} else {
										console.log(JSON.stringify(err));
									}
								});
								$("#loadingToast").hide();
							}

							var parameter = {
								"floorid": floorid,
								"checkInDate": startTime,
								"checkOutDate": endTime
							};
							signAjax(JSON.stringify(parameter), url.jdfjxx, callback);
						}
						$("#" + data[0].NUM).css('color', '#C88E37');
					}
					}


			}




			var parameter = {
				"buildingId": buidlingId
			};
			signAjax(JSON.stringify(parameter), url.jdlcxx, callback);

			$("#jstitle").html(api.pageParam.hotel_name);
			var startTime = api.pageParam.startTime;
			var endTime = api.pageParam.endTime;
			var today = getNowFormatDate(startTime, 0);
			var temo = getNowFormatDate(endTime, 0);
			//alert(dateArr[0]);
			var rzsj = document.getElementById('rzsj');
			var tfsj = document.getElementById('tfsj');

			$('#rzsj').val(today);
			$('#tfsj').val(temo);
			var ddate = getDays(startTime, endTime);
			$("#rest_day").html("共" + ddate + "晚");

			function getDays(date1, date2) {
				var date1Str = date1.split("-"); //将日期字符串分隔为数组,数组元素分别为年.月.日
				//根据年 . 月 . 日的值创建Date对象
				var date1Obj = new Date(date1Str[0], (date1Str[1] - 1), date1Str[2]);
				var date2Str = date2.split("-");
				var date2Obj = new Date(date2Str[0], (date2Str[1] - 1), date2Str[2]);
				var t1 = date1Obj.getTime();
				var t2 = date2Obj.getTime();
				var dateTime = 1000 * 60 * 60 * 24; //每一天的毫秒数
				var minusDays = Math.floor(((t2 - t1) / dateTime)); //计算出两个日期的天数差
				var days = Math.abs(minusDays); //取绝对值
				return days;
			}


			function getNowFormatDate(date, addDayCount) {

				var now = new Date(date);
				now.setDate(now.getDate() + addDayCount);
				//格式化日，如果小于9，前面补0
				var day = ("0" + now.getDate()).slice(-2);
				var mday = ("0" + now.getDate()).slice(-2);
				var month = ("0" + (now.getMonth() + 1)).slice(-2);
				//拼装完整日期格式
				var newDate = now.getFullYear() + "-" + (month) + "-" + (day);
				return newDate;

			}



			function getDate() {
				var ddd = new Date();
				var day = ddd.getDate();

				if (ddd.getMonth() < 10) {
					var month = "0" + (ddd.getMonth() + 1);
				}

				if (ddd.getDate() < 10) {
					day = "0" + ddd.getDate();
				}

				var datew = ddd.getFullYear() + "-" + month + "-" + day;
				return datew;
			}

		}
		var roomIdArr = new Array();


		function bookHotel() {
			//alert(roomIdArr.length);
			if (roomIdArr.length == 0) {
				alert("请先选择房间！");
				return false;
			}
			var startTime = $("#startTime").val();
			var endTime = $("#endTime").val();
			var width = document.documentElement.clientWidth;
			var height = document.documentElement.clientHeight;
			var jstitle = $('#jstitle').text();
			var phone = $api.getStorage("dl_phone");
			if (phone == undefined || phone == "undefined") {
				api.alert({
					msg: "请先登录"
				});
				api.openWin({
					name: 'login',
					url: '../login.html'
				});
				return;
			}
			api.openWin({
				name: 'book_hotel',
				url: './book_hotel.html',
				pageParam: {
					roomIdArr: roomIdArr,
					jstitle: jstitle,
					startTime: stDate,
					endTime: edDate,
					//merid: merid
				}

			});
		}
	</script>
	<script>
		/*
		*选择楼层
		*/
		function openRooms(num, floorid) {
			for (m in data) {
				$("#" + data[m].NUM).css('color', 'black');
			}
			$('#' + num).css('color', '#C88E37');
			$("#roomBox").html("");
			var startTime = $("#startTime").val();
			var endTime = $("#endTime").val();
			curFloorId = floorid;
			curNum = num;
			var callback = function(ret, err) {
				console.log(JSON.stringify(ret));
				var data = ret.list;
				var floor = document.getElementById('floor' + num + '');

				var roomBox = document.getElementById('roomBox');
				var YZBArray = new Array;
				var XZBArray = new Array;
				var narr = new Array;
				for (var i = 0; i < data.length; i++) {

					YZBArray.push(parseInt(data[i].YZB));
					XZBArray.push(parseInt(data[i].XZB));
				}
				var maxXZB = Math.max.apply(null, XZBArray);
				var maxYZB = Math.max.apply(null, YZBArray);
				//判断该楼层房间数量，并设置不同的css
				for (var i = 0; i < data.length; i++) {
					if (data[i].FLOOR == num) {
						var ROOMNUM = data[i].ROOMNUM;
						var ROOMTYPE = data[i].ROOMTYPE;
						if (data[i].ROOMNUM == null || data[i].ROOMNUM == "") {
							ROOMNUM = "";
						}
						if (data[i].ROOMTYPE == null || data[i].ROOMTYPE == "") {
							ROOMTYPE = "";
						}
						if (data[i].STATUS == '1') {
							var roomId = 2;
							$api.append(roomBox, '<div id="' + data[i].ID + '" class="rmstyle" onclick=openThis("' + data[i].ROOMTYPEID + '","' + data[i].ID + '","' + roomId + '","' + ROOMNUM + '")  style="float:left;top:' + 52 * data[i].XZB + 'px;left:' +
								52 * data[i].YZB + 'px;background:#C93A29;"><div>' + ROOMNUM + '</div><div>' + ROOMTYPE + '</div></div>');
						} else {
							var roomId = 1;
							if (data[i].LATTYPE != '0') {
								if (data[i].LATTYPE == '1') {
									$api.append(roomBox, '<div id="' + data[i].ID + '" class="rmstyle" style="float:left;top:' + 52 * data[i].XZB + 'px;left:' + 52 * data[i].YZB + 'px;"><div>员工房</div><div></div></div>');
								}
								if (data[i].LATTYPE == '3') {
									$api.append(roomBox, '<div id="' + data[i].ID + '" class="rmstyle" style="float:left;top:' + 52 * data[i].XZB + 'px;left:' + 52 * data[i].YZB + 'px;"><div>电梯</div><div></div></div>');
								}
								if (data[i].LATTYPE == '2') {
									$api.append(roomBox, '<div id="' + data[i].ID + '" class="rmstyle" style="float:left;top:' + 52 * data[i].XZB + 'px;left:' + 52 * data[i].YZB + 'px;"><div></div><div></div></div>');
								}

							} else {
								$api.append(roomBox, '<div id="' + data[i].ID + '" class="rmstyle" onclick=openThis("' + data[i].ROOMTYPEID + '","' + data[i].ID + '","' + roomId + '","' + ROOMNUM + '")  style="top:' + 52 * data[i].XZB +
									'px;left:' + 52 * data[i].YZB + 'px;"><div>' + ROOMNUM + '</div><div>' + ROOMTYPE + '</div></div>');
							}
						}
					}
				}

				var roomIdArr = new Array();
				var numNum = new Array();

				for (var i = 0; i < roomIdArr.length; i++) {
					var id = document.getElementById(roomIdArr[i][0]);
					$api.removeCls(id, 'roomStyle1');
					$api.addCls(id, 'cur-room-style');
				}
				for (var i = 0; i < numNum.length; i++) {
					if (numNum[i] != floor) {
						$api.removeCls(numNum[i], 'floorsStyle');
					}
				}
			}

			var parameter = {
				"floorid": floorid,
				"checkInDate": startTime,
				"checkOutDate": endTime
			};
			signAjax(JSON.stringify(parameter), url.jdfjxx, callback);
		}

		/*
		*选择（更换）房间类型
		*/
		function change_room(num,name, price) {
			$('#room_name').html(name);
			$('#room_price').html("¥" + price);
			for(i in str){
         $("#"+str[i].ID).css("color","black");
			}
			$("#"+num).css("color","#C88E37");

			var offset = $api.offset($api.dom('#room_img'));
			var height = $("#room_img").height();
			var width = $("#room_img").width();
			var UIScrollPromptView = api.require('UIScrollPromptView');
			// alert(JSON.stringify(pic));
			UIScrollPromptView.open({
				rect: {
					x: offset.l,
					y: offset.t,
					w: width,
					h: height
				},
				data: {
					paths: pic,
					captions: [],
					prompts: pic
				},
				styles: {
					caption: {
						height: 35,
						color: '#E0FFFF',
						size: 13,
						bgColor: '#696969',
						position: 'bottom'
					},
					indicator: {
						align: 'center',
						color: '#FFFFFF',
						activeColor: '#298cb4'
					},
					prompt: {
						button: {
							normal: '',
							highlight: '',
							x: 0,
							y: 100,
							w: 60,
							h: 40
						},
						x: 0,
						y: 50,
						w: 160,
						h: 90,
						contentMode: 'scaleToFill',
						animation: true
					}
				},
				placeholderImg: '',
				contentMode: 'scaleToFill',
				interval: 3,
				fixedOn: '',
				loop: true,
				fixed: false
			});

		}
	</script>
</body>

</html>
